
<template>
  <div class="dataset-order-by">
    <el-tag v-for="(iits, index) in selectOrderByList"
            :key="index"
            @close="deleteOrderByItem(index)"
            closable
            :type="rowClass(iits)"
            >
      <i class="cuifont icon_arrow_ascending sort"
         v-if="iits.sort === 'ASC'"
         @click="changeSort(index)"></i>
      <i class="cuifont icon_arrow_descending sort"
         v-else
         @click="changeSort(index)"></i>{{ iits.alias }}
    </el-tag>
    <el-dropdown trigger="click"
                 size="small"
                 placement='bottom'
                 @command='selectedField'>
      <el-button circle
                 plain
                 size="mini"
                 type="primary"
                 class="el-icon-plus"></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-if="tempOrderByList.length < 1"
                          :disabled="true"
                          command='no-data-message'>{{$t('custom.component.columns.nodata')}}</el-dropdown-item>
        <template v-else>
          <el-dropdown-item v-for="(item, index) in tempOrderByList"
                            :key="index"
                            :command='item'>{{ item.alias }}</el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>

export default {
  props: {
    orderByFieldsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    qureyInfo: {
      type: Object,
      default: () => { }
    },
    errorFieldsList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectOrderByList: [],
      tempOrderByList: []
    }
  },
  watch: {
    orderByFieldsList: {
      handler: function (val) {
        this.tempOrderByList = val
      },
      deep: true
    },
    qureyInfo: {
      handler: function (val) {
        try {
          val.orderBy && (this.selectOrderByList = val.orderBy)
        } catch (error) {
          this.selectOrderByList = []
        }
      },
      deep: true
    },
    selectOrderByList: {
      handler: function (val) {
        val.forEach((item, index) => {
          if (this.errorFieldsList && this.errorFieldsList.length > 0) {
            let findIndex = this.errorFieldsList.findIndex(e => e.columnName === item.field && e.refLocation === 'widgetBuild_dataset_orderBy')
            if (findIndex > -1) {
              item.fieldStatus = true
            }
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  computed: {

  },
  created () {
    this.init()
  },
  methods: {
    rowClass (row) {
      if (row.fieldStatus) {
        return 'danger'
      }
    },
    init () {
      try {
        this.tempOrderByList = this.orderByFieldsList ? this.orderByFieldsList : []
        this.selectOrderByList = this.qureyInfo.orderBy ? this.qureyInfo.orderBy : []
      } catch (err) { }
    },
    selectedField (val) {
      this.addOrderByItem(val)
    },
    addOrderByItem (val) {
      if (this.selectOrderByList.length === 0) {
        this.selectOrderByList.push({
          field: val.fields,
          sort: 'ASC',
          alias: val.alias
        })
        return
      } else {
        let hasField = this.selectOrderByList.find(function (value, index, arr) {
          return value.alias === val.alias
        })
        if (!hasField) {
          this.selectOrderByList.push({
            field: val.fields,
            sort: 'ASC',
            alias: val.alias
          })
        }
      }
      this.$forceUpdate()
    },
    deleteOrderByItem (index) {
      this.selectOrderByList.splice(index, 1)
      this.$forceUpdate()
    },
    changeSort (index) {
      let sortValue = this.selectOrderByList[index]['sort'] === 'ASC' ? 'DESC' : 'ASC'
      this.selectOrderByList[index]['sort'] = sortValue
      this.$forceUpdate()
    },
    getOrderByList () {
      try {
        return this.selectOrderByList
      } catch (error) {
      }
    },
    clearOrderBy () {
      this.tempOrderByList = []
      this.selectOrderByList = []
      this.$forceUpdate()
    },
    orderByListCheck () {
      try {
        if (this.selectOrderByList && this.selectOrderByList.length > 0) {
          let isExist = true
          for (let index = 0; index < this.selectOrderByList.length; index++) {
            const selectElement = this.selectOrderByList[index].alias
            let result = this.tempOrderByList.find(item => {
              return item.alias === selectElement
            })
            if (!result) {
              isExist = false
              break
            }
          }
          if (isExist) {
            return isExist
          }
        } else {
          return true
        }
      } catch (error) {
      }
    }
  }
}
</script>

<style scoped>
</style>
